<template>
    <div class="container">
        <div class="top">
            <el-select v-model="search.type" placeholder="请选择类型">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input style="width:300px" :disabled="true" placeholder="请搜索商品信息" v-model="commodityNameList.name">
                <template slot="prepend">商品</template>
                <el-button slot="append" icon="el-icon-search" @click="commodityBtn"></el-button>
            </el-input>
            <el-date-picker value-format="yyyy-MM-dd" v-model="date" type="daterange" :clearable="false"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button size="small" type="primary" icon="el-icon-search" class="handleSearch" @click="handleSearch()">查询
            </el-button>
            <el-button size="small" type="danger" class="handleSearch" icon="el-icon-delete" @click="empty()">清空
            </el-button>
            <el-button class="add" icon="el-icon-refresh" size="small" type="success" @click="refresh">刷新</el-button>
            <el-button type="info" size="small" icon="el-icon-tickets" @click="derive()">导出</el-button>
        </div>
        <el-table max-height="600" :data="tableData" border style="width: 100%" row-class-name="table-row-class"
            ref="table" empty-text="暂无数据">

            <el-table-column prop="productname" label="商品名称" align="center"></el-table-column>
            <el-table-column prop="productcode" label="商品编码" align="center"></el-table-column>
            <el-table-column prop="money" label="品项采购合计金额" align="center"></el-table-column>
            <el-table-column prop="withholding_fee" label="预提费" align="center"></el-table-column>
            <el-table-column prop="spillfoldvalue" label="溢折值" align="center"></el-table-column>

        </el-table>
        <!-- 分页 -->
        <!-- <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination> -->
        <commodityDialog :commoditydialog="commoditydialog" @tag="commodityTag"></commodityDialog>
    </div>
</template>
<script>
    import { getnowDate } from "@/utils/index";
    import Pagination from "@/components/pagination";
    import CommodityDialog from "@/components/grossMargin/commodityDialog";
    import { purchaseSummary } from "@/api/grossMargin/grossMarginList";
    import { getToken } from "@/utils/auth";
    import { classifyList } from "@/api/commodity/commodityList";

    export default {
        components: {
            pagination: Pagination,
            commodityDialog: CommodityDialog
        },
        data() {
            return {
                //页面数据
                tableData: [],

                //分页
                pageData: {
                    pageSizes: [10, 20],
                    pageSize: 10,
                    page: 1,
                    total: null,
                    layout: "total, sizes, prev, pager, next, jumper"
                },
                //默认时间
                normal_startime: getnowDate().newStarTimer,
                normal_endtime: getnowDate().endtimer,
                search: {
                    type: "0",
                    goods_id: "",
                    goods_code: "",
                    start_time: "",
                    end_time: ""
                },
                options: [{
                    value: '0',
                    label: '销售采购费用'
                }, {
                    value: '1',
                    label: '退货采购费用'
                }],
                //dialog信息
                commoditydialog: {
                    centerDialogVisible: false
                },
                commodityNameList: {
                    name: "",
                    code: "",
                    id: ""
                },
                date: []
            };
        },
        created() {
            this.search.start_time = this.normal_startime;
            this.search.end_time = this.normal_endtime;
            if (this.normal_startime) {
                this.date.push(this.search.start_time);
            }
            if (this.normal_endtime) {
                this.date.push(this.search.end_time);
            }
            this.getData();
        },
        methods: {
            //获取页面数据
            getData() {
                let data = {
                    limit: this.pageData.pageSize,
                    page: this.pageData.page,
                    is_refund: this.search.type,
                    goods_code: this.commodityNameList.code,
                    start_date: this.search.start_time,
                    end_date: this.search.end_time
                };

                purchaseSummary(data)
                    .then(res => {
                        if (res.code == 0) {
                            this.tableData = res.data.list.data;
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            commodityTag(data) {
                this.commodityNameList = {
                    name: "",
                    code: "",
                    id: ""
                };
                console.log(data, 11111);
                let arrName = [];
                let arrCode = [];
                let arrId = [];
                data.forEach(res => {
                    arrName.push(res.name);
                    arrCode.push(res.code);
                    arrId.push(res.id);
                });

                this.commodityNameList.name = arrName.join(",");
                this.commodityNameList.code = arrCode.join(",");
                this.commodityNameList.id = arrId.join(",");
            },
            //超级商品搜索
            commodityBtn() {
                this.commoditydialog = {
                    centerDialogVisible: true
                };
            },
            // 本地搜索
            handleSearch() {
                if (this.date) {
                    this.search.start_time = this.date[0];
                    this.search.end_time = this.date[1];
                }
                this.pageData.page = 1;
                this.pageData.total = null;
                this.getData();
            },
            // 导出
            derive() {
                this.$confirm("是否导出?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let link = document.createElement("a");
                        if (this.date) {
                            this.search.start_time = this.date[0];
                            this.search.end_time = this.date[1];
                        }
                        link.href = `${this.$axios.defaults.baseURL
                            }/api/Warereport/exportPurchaseSummaryData?token=${getToken()}&goods_code=${this.commodityNameList.code}&start_date=${this.search.start_time
                            }&end_date=${this.search.end_time}`;
                        link.click();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消导出"
                        });
                    });
            },
            //刷新
            refresh() {
                this.empty();
                this.getData();
            },
            //清空
            empty() {
                this.date = [];
                this.date.push(this.normal_startime);
                this.date.push(this.normal_endtime);
                this.search = {
                    type: "",
                    goods_code: "",
                    start_time: this.normal_startime,
                    end_time: this.normal_endtime
                };
                this.commodityNameList.name = "";
                this.commodityNameList.id = "";
                this.commodityNameList.code = "";
            },
            //每页多少条
            handleCurrentChange(val) {
                this.pageData.page = 1;
                this.pageData.pageSize = val;
                this.getData();
            },
            //选取页数
            handleSizeChange(page) {
                this.pageData.page = page;
                this.getData();
            },
        },

    };
</script>
<style scoped>
    .top {
        position: relative;
        margin-bottom: 5px;
    }

    .add {
        position: absolute;
        right: 0;
        top: 4px;
    }

    .pagination {
        text-align: right;
        padding: 10px;
    }
</style>